<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Signers</title>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/art-template/lib/template-web.js"></script>
    <script src="./js/request.js"></script>
    <script src="./js/reqSigners.js"></script>
    <script src="./js/common.js"></script>
    <link rel="stylesheet" href="./css/common/normalize.css">
    <link rel="stylesheet" href="./css/base/base.css">
    <link rel="stylesheet" href="./css/common/common.css">
    <link rel="stylesheet" href="./css/module/signer.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="shortcut icon" href="./resource/static/favicon.ico" type="image/x-icon">
</head>

<body>
    <!-- 头部部分 -->
    <header></header>
    <!-- main -->
    <main>
            <div class="mod_singer_push ">
                <div class="section_inner">
                    <h2 class="singer_push__tit"><i class="icon_txt">万千歌手，尽在眼前</i></h2>
                    <div class="singer_push__desc"><i class="icon_txt singerDesc"></i></div>
                    <a href="./login.html" class="btnLogin"><button class="singer_push__btn">立即登录<span class="singer_push__btn_border"></span></button></a>
                </div>
            </div>
            <div class="singer_body">
                <div class="main">
                    <div class="mod_singer_tag">
                        <div class="singer_tag__list tg">
                            <p class="singer_tag__item singer_tag__item--al">热门</p>
                            <a class="singer_tag__item tagItems btnColor">A</a><a class="singer_tag__item tagItems">B</a>
                            <a class="singer_tag__item tagItems">C</a><a class="singer_tag__item tagItems">D</a>
                            <a class="singer_tag__item tagItems">E</a><a class="singer_tag__item tagItems">F</a>
                            <a class="singer_tag__item tagItems">G</a><a class="singer_tag__item tagItems">H</a>
                            <a class="singer_tag__item tagItems">I</a><a class="singer_tag__item tagItems">J</a>
                            <a class="singer_tag__item tagItems">K</a><a class="singer_tag__item tagItems">L</a>
                            <a class="singer_tag__item tagItems">M</a><a class="singer_tag__item tagItems">N</a>
                            <a class="singer_tag__item tagItems">O</a><a class="singer_tag__item tagItems">P</a>
                            <a class="singer_tag__item tagItems">Q</a><a class="singer_tag__item tagItems">R</a>
                            <a class="singer_tag__item tagItems">S</a><a class="singer_tag__item tagItems">T</a>
                            <a class="singer_tag__item tagItems">U</a><a class="singer_tag__item tagItems">V</a>
                            <a class="singer_tag__item tagItems">W</a><a class="singer_tag__item tagItems">X</a>
                            <a class="singer_tag__item tagItems">Y</a><a class="singer_tag__item tagItems">Z</a>
                            <a class="singer_tag__item tagItems">#</a>
                        </div>
                        <div class="singer_tag__list ty">
                            <p class="singer_tag__item singer_tag__item--all" data-id="-1">全部</p>
                            <a class="singer_tag__item taglis" data-id="16">韩国</a>
                            <a class="singer_tag__item taglis" data-id="7">华语</a>
                            <a class="singer_tag__item taglis" data-id="96">欧美</a><a class="singer_tag__item taglis" data-id="8">日本</a>
                            <a class="singer_tag__item taglis" data-id="0">其他</a>
                        </div>
                        <div class="singer_tag__list tc">
                            <p class="singer_tag__item singer_tag__item--all" data-id="-1">全部</p>
                            <a class="singer_tag__item tagList" data-id="1">男</a>
                            <a class="singer_tag__item tagList" data-id="2">女</a>
                            <a class="singer_tag__item tagList" data-id="3">乐队</a>
                        </div>
                    </div>

                    <div class="mod_singer_list ">
                        <ul class="singer_list__list"></ul>
                    </div>
                    <ul class="singer_list_txt"></ul>
                </div>


        </div>
        <!-- art-template模板开始渲染 -->
        <script type="text/html" id="tpl">
            {{each data item index}}
                <li class="singer_list__item">
                    <div class="singer_list__item_box">
                        <a class="singer_list__cover" data-id="{{ item.id }}" title="{{item.name}}" href="./singersDetail.html">
                            <img class="singer_list__pic" loading="lazy" src="{{item.picUrl}}"/>
                        </a>
                        <h3 class="singer_list__title" style="min-height:20px">
                            <p href="#">{{item.name}}</p>
                        </h3>
                    </div>
                </li>
            {{ /each }}
        </script>
    </main>
    <!-- footer页面 -->
    <footer></footer>
    <script>
        const singer_push__btn = document.querySelector('.singer_push__btn');
        const btnLogin = document.querySelector('.btnLogin');
        const singerDesc = document.querySelector('.singerDesc');
        console.log(singerDesc);
        if (localStorage.getItem('img') !== null) {
            singerDesc.innerHTML = `Welcome！${localStorage.getItem('nickname')}`;
            singer_push__btn.innerHTML = `欢迎登录<span class="singer_push__btn_border"></span>`;
            btnLogin.href = 'javascript:void(0);'
        }

    </script>
    <script src="./js/module/appendID.js"></script>

</body>

</html>